var weeks = "日一二三四五六".split('')
    monthM = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]
    monthD = [31,28,31,30,31,30,31,31,30,31,30,31]

    cvs = document.getElementById("cvs")
    ctx = cvs.getContext('2d')
    riliCanvas = document.getElementById("rili")
    riliCtx = riliCanvas.getContext('2d')
    display = document.getElementById("display")
    displayCtx = display.getContext('2d')
    screenImage = document.getElementById("screenImage");
    screenCtx = screenImage.getContext("2d");
//绘制日历
function drawRili(){
    var time = new Date()
        year = time.getFullYear()
        month = time.getMonth()
        today = time.getDate()
        week = time.getDay()
        firstD = new Date(year,month,1).getDay()//当月的第一天是星期几
        monthD[1] = (year % 400 == 0 ||(year % 4 == 0 && year % 100 == 0)) ? 29 : 28 //闰年的二月有29天
        nowD = monthD[month] //当月的天数
        row = 6 //日历的行数 
        if (7 - firstD + 4*7 < nowD) {
            row = 7
        }
        cardSize = 40 
        dayIndex = 1

        riliCtx.font = "900 26px SimHei"
        riliCtx.fillStyle = "rgba(69,68,84)"
        riliCtx.textAlign = "center"
        riliCtx.scale(1.1,1)
        riliCtx.fillText(monthM[month] + "月",260,32)
        riliCtx.resetTransform()

        riliCtx.font = "20px SimHei"
        riliCtx.textAlign = "end"
        riliCtx.fillText(today + "日",520 ,35)

        for (var i = 0;i < row; i++){
            for (var j = 0;j < 7; j++){
                riliCtx.strokeRect(45 + j * cardSize * 1.7, 50 + i * cardSize, cardSize * 1.7 , cardSize)
            }
        }

        function drawDate(txt,i,j){
            var re = /[\u4E00-\u9FA5\uF900-\uFA2D]/
            if (txt == today){
                drawTodaybj(i,j)
            }
            riliCtx.fillStyle = "rgb(69,68,84)"
            riliCtx.textAlign = "center"
            riliCtx.font = (cardSize / 1.5) + 'px Impact'
            if ((j == 0 || j == 6) && !re.test(txt)){//使用正则判断是否含有中文
                riliCtx.fillStyle = "#900"
            }
            riliCtx.fillText(txt,45 + j * cardSize * 1.7 + cardSize * 0.95,50 + i * cardSize + cardSize / 3 * 2 + 3)
        }

        for (var i = 0;i < row; i++){
            for (var j = 0;j < 7; j++){
                if( i == 0){//第一行绘制星期
                    drawDate(weeks[j],i,j)
                    continue
                }
                if( i == 1 && j < firstD){//1号的绘制位置
                    continue
                }
                if (dayIndex > nowD){
                    break
                }
                drawDate(dayIndex ++ , i, j)
            }
        }

        function drawTodaybj(i,j){
            riliCtx.save()

            riliCtx.beginPath()
            riliCtx.strokeStyle = "red"
            riliCtx.arc(45 + j * cardSize * 1.7 + cardSize * 0.95 , 50 + i * cardSize + cardSize / 2,cardSize / 2 - 7, -Math.PI , Math.PI * 0.7)
            riliCtx.stroke()
            riliCtx.closePath()

            riliCtx.beginPath()
            riliCtx.arc(45 + j * cardSize * 1.7 + cardSize * 0.95 , 50 + i * cardSize + cardSize / 2,cardSize / 2 - 6, -Math.PI , Math.PI * 0.6)
            riliCtx.stroke()
            riliCtx.closePath()

            riliCtx.beginPath()
            riliCtx.arc(45 + j * cardSize * 1.7 + cardSize * 0.95 , 50 + i * cardSize + cardSize / 2,cardSize / 2 - 5, -Math.PI , Math.PI * 0.5)
            riliCtx.stroke()
            riliCtx.closePath()

            riliCtx.beginPath()
            riliCtx.arc(45 + j * cardSize * 1.7 + cardSize * 0.95 , 50 + i * cardSize + cardSize / 2,cardSize / 2 - 4, -Math.PI , Math.PI * 0.4)
            riliCtx.stroke()
            riliCtx.closePath()

            riliCtx.beginPath()
            riliCtx.arc(45 + j * cardSize * 1.7 + cardSize * 0.95 , 50 + i * cardSize + cardSize / 2,cardSize / 2 - 3, -Math.PI , Math.PI * 0.3)
            riliCtx.stroke()
            riliCtx.closePath()

            riliCtx.restore()
        }
}
drawRili()
// 加载图片
var bg = new Image()
bg.src = "images/bg.png"

var mask = new Image()
mask.src = "images/mask.png"

var light = new Image()
light.src = "images/light.png"

var caidai = new Image()
caidai.src = "images/caidai.png"

var two = new Image()
two.src = "images/22.png"

var screenLight = new Image()
screenLight.src = "images/screenLight.png"

var phoneLight = new Image()
phoneLight.src = "images/phoneLight.png"

var screenMask = new Image();
screenMask.src = "images/Screenmask.png";

var screen = new Image();
screen.src = "images/screen.png";

//左上角屏幕内容
var tv = setInterval(() => {
    if (screen.complete && screenMask.complete) {
        screenCtx.drawImage(screen, -700, -210, 1280, 720);//
        
        screenCtx.globalCompositeOperation = "destination-atop";//用后面的图像形状去裁剪前面的图片
        screenCtx.drawImage(screenMask, 0, 0);
        screenCtx.globalCompositeOperation = "source-over";
        clearInterval(tv);
    }
}, 10);

// 奇妙的屏幕大小自适应
window.onresize = function () {
    if (window.innerWidth / window.innerHeight > (1980/1080)) {
        display.width = window.innerWidth
        display.height = window.innerWidth / 1980 * 1080

        window.scrollTo(0, (window.innerHeight - 123) / 16)
    } else if(window.innerWidth < window.innerHeight){
        display.width = window.innerWidth
        display.height = window.innerHeight
        console.log(111)
    }else {
        display.width = window.innerHeight / 1080 * 1980
        display.height = window.innerHeight
    }
}
window.onresize()


function render(){
    //背景 和 日历背景
    ctx.clearRect(0, 0, 1980, 1080);
    ctx.drawImage(bg, 0, 0);
    ctx.drawImage(mask, 954, 99);

    //电视内容
    ctx.drawImage(screenImage, 0, 0);
    //日历
    ctx.transform(.96,0,0,.96,967,100)
    ctx.rotate(6 * (Math.PI / 180))
    ctx.drawImage(riliCanvas,0,0)
    ctx.resetTransform();

    //彩带 和 22娘
    ctx.drawImage(caidai,950,25)
    ctx.drawImage(two,1319,345)
    
    // 光束效果
    ctx.globalCompositeOperation = "overlay"//正片叠底效果
    ctx.drawImage(light,971,197)
    ctx.globalCompositeOperation = "source-over"//跟前面的组合会有神奇的效果

    // 时钟的时间
    ctx.fillStyle = "#97adbb";
    ctx.font = "43px Impact";
    ctx.transform(1, 2.05 * (Math.PI / 180), 0, 1, 0, 0);
    var time = new Date();
    var timeT = (time.getHours() < 10 ? "0" : "") + time.getHours().toString() + ":" + (time.getMinutes() < 10 ? "0" : "") + time.getMinutes() + ":" + (time.getSeconds() < 10 ? "0" : "") + time.getSeconds().toString()
    ctx.textAlign = "start"  
    ctx.fillText(timeT, 725, 318);
    ctx.resetTransform();

    //手机文字
    var phoenText = {0:'凌晨啦',6:'早安咯！',8:'上午好鸭！',12:'你吃了吗？',18:'傍晚咯！',20:'啦啦啦',23:'晚安，么么哒'}
        txt = ""
    // console.log(time.getHours())
    for (var i in phoenText){
        if (time.getHours() >= i){
            txt = phoenText[i]
        }
    }
    // console.log(txt)
    ctx.transform(1.0911, -35 * (Math.PI / 180), 0, 0.5868, 1132.94, 564.07);
    ctx.rotate(56.5 * (Math.PI / 180));
    ctx.fillStyle = "#fff"
    ctx.font = "31px SimHei";
    ctx.textAlign = "center"
    ctx.fillText(txt,135,100)
    ctx.resetTransform()

    //如果是手机的则把画面旋转九十度
    if(window.innerWidth < window.innerHeight){
        displayCtx.transform(1,0,0,1,display.width,0)
        displayCtx.rotate(90 * (Math.PI / 180))
        displayCtx.drawImage(cvs,0,0,display.height,display.width)
        displayCtx.resetTransform();
    }else{
        displayCtx.drawImage(cvs,0,0,display.width,display.height)
    }

   

    window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)
// var iv = setInterval(() => {
//     if (bg.complete && mask.complete) {
//         ctx.clearRect(0, 0, 1980, 1080);
//         ctx.drawImage(bg, 0, 0);
//         ctx.drawImage(mask, 954, 99);
//         clearInterval(iv);
//     }
// }, 14);
// var timeId = setInterval(()=>{
// 	render()
// },5)